<template>
  <div class="list-table noPad scheduleBox">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('会议类型')" prop="meetingType">
        <dict-select v-model="queryParams.meetingType" :placeholder="$t('会议类型')" dictionary="mt_type" />
      </el-form-item>
      <el-form-item :label="$t('项目名称')" prop="dealName">
        <el-input v-model="queryParams.dealName" :placeholder="$t('项目名称')" clearable @keyup.enter.native="queryHandle" />
      </el-form-item>
      <el-form-item :label="$t('投资主体')" prop="fundName">
        <el-input v-model="queryParams.fundName" :placeholder="$t('投资主体')" clearable @keyup.enter.native="queryHandle" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
      </el-form-item>
    </el-form>
    <FullCalendar
      ref="fullCalendar"
      v-loading="loading"
      default-view="dayGridMonth"
      locale="zh-cn"
      first-day="1"
      week-number-calculation="ISO"
      :header="header"
      :plugins="calendarPlugins"
      :events="calendarEvents"
      :button-text="buttonText"
      scheduler-license-key="CC-Attribution-NonCommercial-NoDerivatives"
      :all-day-slot="false"
      @dateClick="handleDateClick"
      @eventClick="handleEventClick"
      @eventMouseEnter="handleMouseEnter"
      @datesRender="handleDateRender"
    />

    <!-- 添加日程 -->
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm calendarForm" append-to-body>
      <!--      <oaWeekScheduleForm ref="oaWeekScheduleForm" />-->
      <mt-arrange-info-form ref="arrangeInfo" />
    </el-dialog>
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import momentPlugin from '@fullcalendar/moment'
import timeGridPlulgin from '@fullcalendar/timegrid'
import '@fullcalendar/core/main.css'
import '@fullcalendar/timegrid/main.css'
import tippy from 'tippy.js'
import 'tippy.js/dist/tippy.css'
import 'tippy.js/themes/light.css'
import 'tippy.js/animations/scale.css'
import { listMtArrangeInfo } from '@/api/meeting/info/mtArrangeInfo'
import MtArrangeInfoForm from '@/views/deal/mt/info/mtArrangeInfoForm.vue'
import { calcTime, getWeek } from '@/utils/ruoyi'
export default {
  components: {
    MtArrangeInfoForm,
    FullCalendar
  },
  data() {
    return {
      loading: true,
      formOpen: false,
      title: '会议日历',
      mintime: '00:00',
      maxtime: '23:00',
      calendarPlugins: [
        dayGridPlugin,
        interactionPlugin,
        momentPlugin,
        timeGridPlulgin
      ],
      header: {
        left: 'dayGridMonth,timeGridWeek,timeGridDay',
        center: 'prev title next',
        right: 'today'
      },
      buttonText: {
        today: this.$t('今天'),
        month: this.$t('月'),
        week: this.$t('周'),
        day: this.$t('天')
      },
      calendarEvents: [],
      queryParams: {
        meetingId: undefined,
        dealId: undefined,
        companyId: undefined,
        mtDate: undefined,
        mtTime: undefined,
        mtMinutesPerson: undefined,
        regularAttendees: undefined,
        dealTeamMembers: undefined,
        innerMember: undefined,
        outerMember: undefined,
        outerEmail: undefined,
        mtAddress: undefined,
        sendUser: undefined,
        ccUser: undefined,
        actTitle: undefined,
        applyContent: undefined,
        // conclusionStatus: 'N',
        // pageNum: 1,
        // pageSize: 10,
        dealName: undefined,
        fundName: undefined,
        closeFlag: '0',
        orderByColumn: 'a.mt_date desc',
        delFlag: '0'
      }
    }
  },
  mounted() {
    var startDate = new Date()
    startDate.setDate(1)
    var endDate = new Date()
    endDate.setDate(1)
    endDate.setMonth(endDate.getMonth() + 1)
    endDate.setDate(0)
    this.queryParams.startTime = this.parseTime(startDate, '{y}-{m}-{d}') + ' 00:00:00'
    this.queryParams.endTime = this.parseTime(endDate, '{y}-{m}-{d}') + ' 00:00:00'
    // this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      listMtArrangeInfo(this.queryParams).then(res => {
        res.rows.forEach(item => {
          item.title = item.actTitle
          if (item.mtTime) {
            var times = item.mtTime.split('-')
            var startDate = this.parseTime(item.mtDate) + ' ' + times[0] + ':00'
            var endDate = this.parseTime(item.mtDate) + ' ' + times[1] + ':00'
            item.start = new Date(startDate)
            item.end = new Date(endDate)
          }
          // item.extendedProps = item
        })
        this.calendarEvents = res.rows
        this.loading = false
      })
    },
    handleDateClick() { // 当天
      // console.log(arg)
      // this.formOpen = true
      // this.$nextTick(() => {
      //   const initDate = {
      //     startTime: this.parseTime(arg.dateStr) + ' 09:00:00',
      //     finishTime: this.parseTime(arg.dateStr) + ' 18:00:00'
      //   }
      //   // this.$refs.oaWeekScheduleForm.init(initDate)
      // })
      return
    },
    handleMouseEnter(info) {
      console.log(info.jsEvent)
      var event = info.event
      // var content = event.title
      console.log(event, 'event')
      var data = event.extendedProps
      console.log(data, '111')
      var context = '<p style="font-weight: bold;font-size: 13px;margin: 0;margin-bottom:5px;padding: 0">' + event.title + '</p>' +
        '<p style="font-weight: 900;font-size: 12px;margin: 0;padding: 0;margin-bottom:5px">' + this.parseTime(data.mtDate, '{y}-{m}-{d}') + ' ' + '(' + getWeek(data.mtDate) + ')' + '</p>' +
        '<p style="font-weight: 900;font-size: 12px;margin: 0;padding: 0;margin-bottom:5px">' + this.parseTime(event.start, '{h}:{i}') + ' - ' + this.parseTime(event.end, '{h}:{i}') + ' (' + calcTime(event.start, event.end) + ')</p>' +
        (data.mtAddressLabel ? '<p style="font-weight: 900;font-size: 12px;margin: 0;padding: 0;margin-bottom:5px">' + data.mtAddressLabel + '</p>' : '') +
        (data.meetingInvitation ? '<p style="font-weight: 900;font-size: 12px;margin: 0;padding: 0;margin-bottom:5px">' + data.meetingInvitation + '</p>' : '')
      tippy(info.el, {
        content: context, // 悬浮框展示的内容
        theme: 'tomato', // 自定义主题，颜色在style中设置
        allowHTML: true, // 为true的时候，可以识别content中的html
        placement: 'auto',
        zIndex: 99999
        // interactive: true
      })
    },
    handleEventClick(info) { // 事件
      console.log(info, '1111')
      this.formOpen = true
      this.$nextTick(() => {
        this.$refs.arrangeInfo.init(info.event)
      })
    },
    handleDateRender(info) {
      var startDate = info.view.currentStart
      var endDate = info.view.currentEnd
      if (info.view.type === 'dayGridMonth') {
        startDate = info.view.currentStart
        endDate = info.view.currentEnd
        endDate.setDate(0)
        this.queryParams.startTime = this.parseTime(startDate, '{y}-{m}-{d}') + ' 00:00:00'
        this.queryParams.endTime = this.parseTime(endDate, '{y}-{m}-{d}') + ' 00:00:00'
      } else if (info.view.type === 'timeGridWeek') {
        startDate = info.view.currentStart
        endDate = info.view.currentEnd
        endDate.setDate(endDate.getDate() - 1)
        this.queryParams.startTime = this.parseTime(startDate, '{y}-{m}-{d}') + ' 00:00:00'
        this.queryParams.endTime = this.parseTime(endDate, '{y}-{m}-{d}') + ' 00:00:00'
        this.$nextTick(() => {
          var target = document.getElementsByClassName('fc-timeGridWeek-view')[0]
          var trs = document.getElementsByClassName('fc-minor')
          var offsetTop = 0
          for (var i = 0; i < trs.length; i++) {
            var value = trs[i].getAttribute('data-time')
            if (value === '09:30:00') {
              offsetTop = trs[i].offsetTop - 25
            }
          }
          target.scrollTo(0, offsetTop)
        })
      } else if (info.view.type === 'timeGridDay') {
        startDate = info.view.currentStart
        endDate = info.view.currentEnd
        this.queryParams.startTime = this.parseTime(startDate, '{y}-{m}-{d}') + ' 00:00:00'
        this.queryParams.endTime = this.parseTime(endDate, '{y}-{m}-{d}') + ' 00:00:00'
      }
      console.log(info.view.type)
      this.getList()
      this.$nextTick(() => {
        var target = document.getElementsByClassName('fc-timeGridDay-view')[0]
        var trs = document.getElementsByClassName('fc-minor')
        var offsetTop = 0
        for (var i = 0; i < trs.length; i++) {
          var value = trs[i].getAttribute('data-time')
          if (value === '09:30:00') {
            offsetTop = trs[i].offsetTop - 25
          }
        }
        target.scrollTo(0, offsetTop)
      })
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    }
  }
}
</script>
